<template>
  <div class="p24 main-sidebar-height" style="background-color: #fff">
    <a-row type="flex" justify="space-between" style="margin-bottom: 24px">
      <a-col :span="10">
        <div style="display: flex">
          <a-range-picker
            @change="timeChange"
            :allow-clear="true"
            :default-value="
              params.beginTime ? [moment(params.beginTime).format('YYYY-MM-DD'), moment(params.endTime).format('YYYY-MM-DD')] : undefined
            "
          />
          <a-select
            title
            :default-value="params.missionMode ? params.missionMode : undefined"
            class="mr12"
            style="width: 145px; margin-left: 12px"
            placeholder="请选择接单类型"
            allow-clear
            @change="handlePayCostTypeName2"
          >
            <a-select-option v-for="item in socPayCostTypeMap2" :key="item.id" style>{{ item.dictItemValue }}</a-select-option>
          </a-select>
        </div>
      </a-col>
    </a-row>
    <div class="last-title-wrapper" style="padding-bottom: 12px">
      <span class="left-line" />
      <span class="last-title"> 合计情况</span>
    </div>
    <a-row type="flex" justify="space-between" style="margin-bottom: 24px">
      <a-col style="width: 23%" @click="paidan(undefined)">
        <div
          :class="
            params.missionCenterState === null || params.missionCenterState === undefined ? 'last-item-wrapper2' : 'last-item-wrapper'
          "
          style="cursor: pointer"
        >
          <div style="position: absolute; top: 18px; width: 40px; height: 40px; right: 15px">
            <img
              v-if="params.missionCenterState === null || params.missionCenterState === undefined"
              src="@/assets/icons/订单1.png"
              style="width: 40px; height: 40px"
            />
            <img v-else src="@/assets/icons/h.png" style="width: 40px; height: 40px" />
          </div>

          <div class="last-item-bottom-wrapper last-title2">合计接单数</div>
          <div class="last-item-bottom-wrapper">
            <div
              :class="params.missionCenterState === null || params.missionCenterState === undefined ? 'dot-color1' : 'dot-color5'"
              class="left-dot"
            />
            <div class="people">{{ totalOptions.receiveCount }}</div>
          </div>
        </div>
      </a-col>
      <a-col style="width: 23%" @click="paidan(0)">
        <div :class="params.missionCenterState === 0 ? 'last-item-wrapper2' : 'last-item-wrapper'" style="cursor: pointer">
          <div style="position: absolute; top: 18px; width: 40px; height: 40px; right: 15px">
            <img v-if="params.missionCenterState === 0" src="@/assets/icons/订单1.png" style="width: 40px; height: 40px" />
            <img v-else src="@/assets/icons/订单2.png" style="width: 40px; height: 40px" />
          </div>
          <div class="last-item-bottom-wrapper last-title2">未完成接单数</div>
          <div class="last-item-bottom-wrapper">
            <div :class="params.missionCenterState === 0 ? 'dot-color1' : 'dot-color3'" class="left-dot" />
            <div class="people">{{ totalOptions.unfinishedDispatchCount }}</div>
          </div>
        </div>
      </a-col>
      <a-col style="width: 23%" @click="paidan(1)">
        <div :class="params.missionCenterState === 1 ? 'last-item-wrapper2' : 'last-item-wrapper'" style="cursor: pointer">
          <div style="position: absolute; top: 18px; width: 40px; height: 40px; right: 15px">
            <img v-if="params.missionCenterState === 1" src="@/assets/icons/订单1.png" style="width: 40px; height: 40px" />
            <img v-else src="@/assets/icons/订单3.png" style="width: 40px; height: 40px" />
          </div>
          <div class="last-item-bottom-wrapper last-title2">已完成接单数</div>
          <div class="last-item-bottom-wrapper">
            <div :class="params.missionCenterState === 1 ? 'dot-color1' : 'dot-color2'" class="left-dot" />
            <div class="people">{{ totalOptions.completedDispatchCount }}</div>
          </div>
        </div>
      </a-col>

      <a-col style="width: 23%" @click="paidan(2)">
        <div :class="params.missionCenterState === 2 ? 'last-item-wrapper2' : 'last-item-wrapper'" style="cursor: pointer">
          <div style="position: absolute; top: 18px; width: 40px; height: 40px; right: 15px">
            <img v-if="params.missionCenterState === 2" src="@/assets/icons/订单1.png" style="width: 40px; height: 40px" />
            <img v-else src="@/assets/icons/订单4.png" style="width: 40px; height: 40px" />
          </div>
          <div class="last-item-bottom-wrapper last-title2">异常接单单次数</div>
          <div class="last-item-bottom-wrapper">
            <div :class="params.missionCenterState === 2 ? 'dot-color1' : 'dot-color4'" class="left-dot" />
            <div class="people">{{ totalOptions.abnormalDispatchCount }}</div>
          </div>
        </div>
      </a-col>
    </a-row>
    <div class="last-title-wrapper" style="padding-bottom: 12px; padding-top: 15px">
      <span class="left-line" />
      <span class="last-title">接单详情</span>
    </div>
    <div class="last-title-wrapper">
      <span style="color: #767885">接单人数：</span>
      <span style="margin-right: 20px; font-size: 14px; font-weight: 700"
        >{{ totalOptions.receiveEmpCount ? totalOptions.receiveEmpCount : 0 }}人</span
      >
      <span style="color: #767885">已完成：</span>
      <span style="margin-right: 20px; font-size: 14px; font-weight: 700"
        >{{ totalOptions.completedCount ? totalOptions.completedCount : 0 }}人</span
      >
      <span style="color: #767885">未完成：</span>
      <span style="margin-right: 20px; font-size: 14px; font-weight: 700"
        >{{ totalOptions.unfinishedCount ? totalOptions.unfinishedCount : 0 }}人</span
      >
      <span style="color: #767885">异常：</span>
      <span style="margin-right: 20px; font-size: 14px; font-weight: 700"
        >{{ totalOptions.abnormalCount ? totalOptions.abnormalCount : 0 }}人</span
      >
    </div>
    <template v-if="!contentList.length">
      <a-empty style="height: 100vh" />
    </template>
    <template v-else>
      <div v-for="item in contentList" :key="item.id" class="now-item-wrapper br4 border mt12 p16">
        <ContentItem :options="item" @change="handleContent" @received="onReceived" />
      </div>
    </template>

    <div v-if="pagination.total" class="bottom-pagination">
      <a-row type="flex" justify="end">
        <a-col>
          <a-pagination
            :show-total="() => `共 ${pagination.total} 条`"
            :total="pagination.total"
            :page-size-options="pageSizeOptions"
            :default-page-size="pagination.pageSize"
            show-size-changer
            v-model="pagination.current"
            show-quick-jumper
            @change="onChangePage"
            @showSizeChange="onShowSizeChange"
          >
            <template slot="buildOptionText" slot-scope="props">
              <span>{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
import { viewMission } from "@/api/company/news";
import ContentItem from "./common/content-item2";
export default {
  name: "Shebao",
  components: { ContentItem },
  data() {
    return {
      pageSizeOptions: ["10", "20", "50", "100"],
      params: {},
      socPayCostTypeMap2: [],
      socPayCostTypeMap: [],
      totalOptions: {},
      contentList: [],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showQuickJumper: true
      }
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  created() {
    // 菜单选中工作台
    this.$store.state.navtab.openKeys = [];
    this.$store.state.navtab.openKeys.push("/dashboard");
    this.$store.state.navtab.selectedKeys = [];
    this.$store.state.navtab.selectedKeys.push("/dashboard");
    if (JSON.stringify(this.$getCondition("jiedan_condition")) !== "{}") {
      this.params = JSON.parse(this.$getCondition("jiedan_condition"));
    }
    // 读取缓存
    if (this.$getPageSize("jiedan_condition")) {
      this.pagination.pageSize = this.params.pageSize =
        parseInt(this.$getPageSize("jiedan_condition")) === 1 ? 10 : parseInt(this.$getPageSize("jiedan_condition"));
      this.params.pageNo = this.pagination.current =
        parseInt(this.$getPage("jiedan_condition")) === 0 ? 1 : parseInt(this.$getPage("jiedan_condition"));
    }

    this.getZidan();
    this.getPerson();
    this.getShebaoTotal();
    this.getShebaoList();
    // this.gethasCanBaoMonth();
  },
  methods: {
    onReceived() {
      this.getShebaoTotal();
      this.getShebaoList();
    },
    // 获取模式
    getZidan() {
      this.$request({
        url: `/admin/api/v1/dictItems/selectAllDictItem`,
        params: {
          dictCode: "1204",
          keyWord: this.keyWord
        }
      }).then(({ data }) => {
        this.socPayCostTypeMap2 = data;
      });
    },
    handlePayCostTypeName2(val) {
      this.params.missionMode = undefined;
      if (val) {
        for (var i = 0; i < this.socPayCostTypeMap2.length; i++) {
          if (this.socPayCostTypeMap2[i].id === val) {
            this.params.missionMode = this.socPayCostTypeMap2[i].dictItemValue;
          }
        }
      }
      // 缓存
      this.$setCondition("jiedan_condition", JSON.stringify(this.params));
      this.params.pageNo = 1;
      this.pagination.current = 1;
      this.getShebaoTotal();
      this.getShebaoList();
    },
    paidan(index) {
      this.params.missionCenterState = index;
      this.params.pageNo = 1;
      this.pagination.current = 1;
      this.getShebaoTotal();
      this.getShebaoList();
      this.$setCondition("jiedan_condition", JSON.stringify(this.params));
    },
    getPerson() {
      this.$request({
        url: `/hr/api/v1/missionCenters/createUserList`
      }).then(({ data }) => {
        this.socPayCostTypeMap = data;
      });
    },
    // 按缴费类型搜
    handlePayCostTypeName(val) {
      this.params.createUserId = val;
      this.params.pageNo = 1;
      this.getShebaoTotal();
      this.getShebaoList();
    },
    timeChange(e) {
      this.pagination.current = 1;
      this.params.beginTime = e.length !== 0 ? e[0].valueOf() : null;
      this.params.endTime = e.length !== 0 ? e[1].valueOf() : null;
      this.params.pageNo = 1;
      this.getShebaoTotal();
      this.getShebaoList();
      // 缓存
      this.$setCondition("jiedan_condition", JSON.stringify(this.params));
    },
    disabledDate(current) {
      //  Can not select days before today and today
      // const month = this.hasMonth.map(i => i.year + "-" + i.month);
      // const c = current.format("YYYY-MM");
      // return current && !month.includes(c);
      return false;
    },
    // 获取有参保的月份
    // gethasCanBaoMonth() {
    //   this.$request({
    //     url: `/hr/api/v1/empSocMonths/listYearAndMonth/${this.hr.companyId}`
    //   }).then(({ data }) => {
    //     this.hasMonth = data || [];
    //   });
    // },
    onShowSizeChange(current, size) {
      this.pagination.current = current;
      this.pagination.size = size;

      this.params.pageSize = size;
      this.params.pageNo = current;

      this.getShebaoList();
    },
    handleTotal(e) {},
    handleContent(e) {
      const query = {
        paidancount: e.dispatchEmpCount,
        yiwanchengcount: e.completedCount,
        weiwanchengcount: e.unfinishedCount,
        yichangcount: e.abnormalCount,
        jiedanState: e.currentUserReceive,
        socDispatchId: e.id,
        title: moment(e.gmtCreate).format("YYYY年MM月") + e.missionName
      };
      localStorage.setItem("listjiedan", e.tableHead);
      // const path = e.addOrLess
      //   ? `/shebao/shebaoJieDan/shebao-add-list`
      //   : `/shebao/shebaoJieDan/shebao-add-list-less`;
      const path = "/shebao/shebaoJieDan/shebao-add-list";
      this.$router.push({ path, query });
    },

    // 获取当月社保接单状况
    getShebaoTotal() {
      this.$request({
        url: `/hr/api/v1/missionCenters/selectAllReceiveTopStatistics`,
        method: "GET",
        params: { ...this.params }
      }).then(({ data }) => {
        this.totalOptions = data;
      });
    },
    // 获取社保列表/hr/api/v1/socDispatches
    getShebaoList() {
      var para = {
        companyId: this.hr.companyId,
        // year: moment(this.date).format("YYYY"),
        // month: moment(this.date).format("MM"),
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...this.params
      };

      viewMission(para).then((res) => {
        if (res.data && res.data.entities) {
          this.contentList = res.data.entities;
          this.pagination.total = res.data.entityCount;
          this.pagination.current = res.data.pageNo;
          this.pagination.pageSize = res.data.pageSize;
          // 缓存
          this.$setPage("jiedan_condition", this.pagination.current + "");
          this.$setPageSize("jiedan_condition", this.pagination.pageSize + "");
        }
      });
    },

    // 分页查询社保

    onChangePage(e) {
      this.params.pageNo = e;
      // this.getShebaoTotal()
      // this.pagination.total = res.data.entityCount;
      this.pagination.current = e;

      this.getShebaoList();
    }
  }
};
</script>

<style lang="scss" scoped>
.left-line {
  width: 3px;
  height: 20px;
  background: var(--primary);
  border-radius: 2px;
  display: inline-block;
  margin-right: 10px;
  position: relative;
  top: 5px;
}

.last-title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: #252525;
  line-height: 22px;
}

.last-title-wrapper {
  margin-bottom: 10px;
}

.now-item-wrapper {
  margin-top: 30px;
  &:hover {
    box-shadow: 0 1px 10px 0 var(--primary77);
  }
}
.bottom-pagination {
  margin-top: 50px;
}

.modal-bottom {
  margin-bottom: 30px;
}
.main-sidebar-height {
  min-height: calc(100vh);
}
.last-item-wrapper {
  cursor: default;
  background-color: #fafafa;
  padding: 10px 0px 10px 50px;
  border-radius: 4px;
  // border: 1px solid rgba(232, 232, 232, 1);
  .last-title2 {
    color: #767885;
  }
  .last-item-bottom-wrapper-img {
    position: relative;
    right: 16px;
  }
  .last-item-bottom-wrapper {
    position: relative;
    right: 16px;
    margin-top: 5px;
    .left-dot {
      width: 8px;
      height: 8px;
      border-radius: 100px;
      display: inline-block;
      margin-right: 5px;
    }

    .dot-color1 {
      background-color: #ffffff;
    }

    .dot-color2 {
      background-color: #32ccaa;
    }

    .dot-color3 {
      background-color: #ff7085;
    }

    .dot-color4 {
      background-color: #ffbb00;
    }

    .dot-color5 {
      background-color: #6b6bf2;
    }
    .people {
      display: inline-block;
      font-size: 18px;
      font-weight: 500;
      color: #55565d;
      margin-left: 10px;
    }
  }
}
.last-item-wrapper2 {
  cursor: default;
  // background-color: var(--primary77);
  background-image: linear-gradient(to right, var(--primary77), var(--primary));
  box-shadow: 0 4px 20px 0 var(--primary77);
  padding: 10px 0px 10px 50px;
  border-radius: 4px;
  .last-title2 {
    color: #ffffff;
  }

  .last-item-bottom-wrapper {
    position: relative;
    right: 16px;
    margin-top: 5px;
    .left-dot {
      width: 8px;
      height: 8px;
      border-radius: 100px;
      display: inline-block;
      margin-right: 5px;
    }

    .dot-color1 {
      background-color: #ffffff;
    }

    .dot-color2 {
      background-color: #32ccaa;
    }

    .dot-color3 {
      background-color: #ff7085;
    }

    .dot-color4 {
      background-color: #ffbb00;
    }

    .dot-color5 {
      background-color: #6b6bf2;
    }
    .people {
      display: inline-block;
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      margin-left: 10px;
    }
  }
}
</style>
